<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue实例2</title>
    <script src="./vue.js"></script>

</head>

<body>
    <div id="app">
        <!--
            {{}}  v-bind  指令中才可以使用过滤器
        -->
        <p>{{hello | captalize}}</p>
        <img :src="imgUrl" alt="">
        <p v-html="ref"></p>
        <!--
            v-on: 事件监听 简写为 @
        -->
        <p @click="clickp">点击p,绑定click事件</p>
        <!--模板中不适合去写复杂的js逻辑,否则会造成模板难以维护-->
        <p> js表达式: {{hello.split('').reverse().join('')}}</p>
        <!--
            1, 计算属性和方法到对比
            计算属性不需要加括号(),方法调用需要加括号();

            计算属性会把计算的结果缓存,之后再次使用时,
            不再执行方法 而是使用之前缓存的结果

            方法调用是调用一次执行一次

            比较而言,计算属性效率高

            计算属性的方法什么时候会重新执行??
            当计算属性中涉及到的data中的数据变化的时候

            2, 计算属性和watch属性的对比
            当一个数据受到多个数据的影响的时候,
            用计算属性可以减少代码重复
        -->
        <p>计算属性: {{reverseHello}}</p>
        <p>methods: {{reverseHello2()}}</p>

        <p>全名: {{fullName}}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hello: 'hello world,i love you',
                imgUrl: "./1.jpg",
                ref: '<a href="https://pic3.zhimg.com/v2-91d8f0af3f3aeba1638479e0c8782cba_r.png">图片</a>',
                firstName: '小许子',
                lastName: '赵'
            },
            // 方法
            methods: {
                clickp: function () {
                    alert('p标签被点击了'),
                    this.hello = "你好"
                    this.firstName = "康定清河"
                },
                reverseHello2: function () {
                    return this.hello.split('').reverse().join('')
                }
            },
            // 过滤器, 转换为大写,
            filters: {
                captalize: function (value) {
                    var upper = value.toUpperCase();
                    return upper;
                },
            },
            // 计算属性
            computed: {
                reverseHello: function () {
                    return this.hello.split('').reverse().join('')
                },
                fullName: function () {
                    return this.firstName + '' + this.lastName;
                }
            },
            // 监视操作
            // watch: {
            //     // 监视到属性发生变化,会执行后面的回调函数
            //     firstName: function (value) {
            //         this.fullName = value + this.lastName;
            //     },
            //     lastName: function (value) {
            //         this.fullName = this.firstName + value;
            //     }
            // }
        })
    </script>
</body>

</html>